<template>
    <div class="home">
        <van-nav-bar title="发票信息" left-arrow @click-left="onClickLeft" right-text="新增" @click-right="onClickRight">
            <!-- <van-icon name="search" slot="right" /> -->
        </van-nav-bar>
        <van-search v-model="value" :show-action="showAction" placeholder="请输入搜索关键词" @search="onSearch"
            @cancel="onCancel" @focus="onFocus" />
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
            <van-cell-group class="account-info" style="margin-top: 10px" v-for="(item, index) in invoiceList"
                :key="index">
                <van-cell title="发票抬头" :value="item.invoiceHead" />
                <van-cell title="税号" :value="item.creditCode" />
                <van-cell title="收件人邮箱" :value="item.consigneeMail" />
                <van-cell title="收件人电话" :value="item.consigneePhone" />
                <van-cell title="开户银行" :value="item.bankBranchName" />
                <van-cell title="银行账户" :value="item.bankAccount" />
                <van-cell title="电话号码" :value="item.companyPhone" />
                <van-cell title="单位地址" :value="item.registerAddress" />
                <van-row>
                    <van-col span="24">
                        <div style="float: right; margin: 16px 14px 16px 0">
                            <van-button size="small" type="info" style="margin-right: 5px"
                                @click="toEditInvoice(item)">编辑</van-button>
                            <van-button size="small" @click="delInsure(item)">删除</van-button>
                        </div>
                    </van-col>
                </van-row>
            </van-cell-group>
            <van-empty v-if="!invoiceList.length" image="search" description="暂无数据" />
        </van-pull-refresh>
        <van-dialog
      v-model="showDel"
      title="确认删除?"
      @confirm="delConfirm"
      show-cancel-button
    >
    </van-dialog>
    </div>
</template>

<script>
import { documentType } from "@/utils/options";
export default {
    name: "home",
    data() {
        return {
            isLoading: true,
            showPicker: false,
            insuredTitle: "新增发票",
            columns: documentType,
            insuredName: "",
            invoiceList: [],
            value: "",
            showAction: false,
            insuredShow: false,
            showDel: false,
            row: {},
        };
    },
    methods: {
        delInsure(item) {
            this.row = item
            this.showDel = true;
        },
        delInsured(item) {
            this.row = item
            this.showDel = true;
        },
        delConfirm() {
            this.$post("/config/invoice/delete", { invoiceId: this.row.invoiceId }).then((res) => {
                this.$toast({
                    message: "删除成功",
                    duration: 800,
                });
                this.showDel = false;
                this.getInvoiceList();
            });
        },
        toEditInvoice(item) {
            localStorage.setItem("invoice", JSON.stringify(item));
            this.$router.push("/addInvoice");
        },
        onClickRight() {
            localStorage.removeItem("invoice");
            this.$router.push("/addInvoice");
        },
        onClickLeft() {
            this.$router.push("/personCenter");
        },
        onSearch() {
            this.$toast(this.value);
        },
        onFocus() {
            this.showAction = true;
        },
        onCancel() {
            this.showAction = false;
        },
        onRefresh() {
            this.getInvoiceList();
        },
        getInvoiceList() {
            this.$get("/config/invoice/list").then((res) => {
                this.invoiceList = res.data;
                this.isLoading = false;
            });
        }
    },
    mounted() {
        this.getInvoiceList();
    },
};
</script>
<style scoped>
.home {
    background-color: #f5f5f5;
}

.title {
    margin: 1em;
    font-size: 1.5em;
}

.van-submit-bar {
    bottom: 16rem !important;
}
</style>